import { defineAsyncComponent, ref, shallowRef, type Component } from 'vue'
import { useModalStore } from '@/stores/modalStore'
import { useCurrActStroe } from '@/stores/currActStore'
import { useColumnStore } from '@/stores/columnStore'
import { useUserStore } from '@/stores/userStore'
import { useMainIndexStore } from '@/stores/mainIndexStore'
import { useCardStore } from '@/stores/cardStore'
import { useAsyncAxios } from '@/utils/asyncFuncStore'
import { storeToRefs } from 'pinia'
import useFontImg from '@/utils/fontImg'
import type { ColumnsList, ErrorData, Users, CardData } from '@/types/loginType'
export default function () {
  // 修改contentTitle
  const { assignTitle } = useMainIndexStore()
  const { imgFollow } = useFontImg()
  assignTitle(imgFollow)
  //
  const { currUser } = storeToRefs(useCurrActStroe())
  const { changeData } = useModalStore()
  const searchKey = ref('')
  // 负责导航栏数据和渲染
  const userColumns = shallowRef<Component>()
  const UserList = defineAsyncComponent(() => import('@/components/index/followig/userList.vue'))
  const tags = ref<HTMLElement>()
  const activeTab = ref(0)
  const tagsData = ref([
    { id: 0, title: '用户' },
    { id: 1, title: '专栏' }
  ])
  async function changeComponents(id: number) {
    activeTab.value = id
    if (id === 0) {
      // 获取用户列表
      userColumns.value = UserList
      getUserList()
    } else {
      // 获取专栏列表
      userColumns.value = defineAsyncComponent(
        () => import('@/components/index/followig/columnList.vue')
      )
      //
      getColumnList()
    }
  }

  // 获取订阅的专栏列表
  async function getColumnList() {
    const { getFollowigColumns, assignListOriginData } = useColumnStore()
    const { status, data } = await getFollowigColumns(currUser.value.id)
    console.log(data)

    if (status === 200) {
      assignListOriginData(data as ColumnsList[])
    } else {
      changeData({ status: status, data: data as ErrorData })
    }
    // 赋值....
  }

  async function getUserList() {
    const { getFollowigUsers, assignUsersOrigin } = useUserStore()
    const { status, data } = await getFollowigUsers(currUser.value.id)
    console.log(data)

    // 赋值....
    if (status === 200) {
      assignUsersOrigin(data as Users[])
    } else {
      changeData({ status: status, data: { msg: (data as ErrorData).msg } })
    }
  }

  //
  // 点击查询其下的文章...
  async function clickTosearchArticle(item: ColumnsList) {
    const { assignCardData } = useCardStore()
    // 异步获取数据
    const { searchFollowigColumnsOrUsersArticle } = useAsyncAxios()
    const result = await searchFollowigColumnsOrUsersArticle(item.id)
    const { status, data } = result
    if (status === 200) {
      assignCardData(data as CardData[])
      const CardMsg = defineAsyncComponent(() => import('@/components/index/card/cardMsg.vue'))
      userColumns.value = CardMsg
    } else {
      // 弹窗
      const { changeData } = useModalStore()
      changeData({ status: -1, data: { msg: '获取失败' } })
    }
  }

  return {
    UserList,
    searchKey,
    userColumns,
    tags,
    activeTab,
    tagsData,
    changeComponents
  }
}
